import React from 'react';
import { Space, Row, Col, Typography, Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Input } from '../index';
import { useInputStyles } from '../style';

const { Text, Title } = Typography;
const { TextArea } = Input;

const App: React.FC = () => {
  const { styles } = useInputStyles();

  return (
    <Space direction="vertical" size={40} style={{ width: '100%' }}>
      {/* 高级搜索 */}
      <div>
        <Text strong style={{ fontSize: 14, display: 'block', marginBottom: 16 }}>● 高级搜索</Text>
        
        {/* 第一行: normal */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>normal</Text>
              </div>
              <Input 
                suffix={<SearchOutlined />}
                placeholder="输入关键字搜索" 
              />
            </div>
          </Col>
        </Row>

        {/* 第二行: hover */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>hover</Text>
              </div>
              <Input 
                suffix={<SearchOutlined />}
                placeholder="输入关键字搜索" 
                className={styles.mockHover}
              />
            </div>
          </Col>
        </Row>

        {/* 第三行: active (3个输入框，都有值) */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>active</Text>
              </div>
              <Input 
                suffix={<SearchOutlined />}
                defaultValue="高级搜索"
                className={styles.mockFocus}
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>active</Text>
              </div>
              <Input 
                suffix={<SearchOutlined />}
                defaultValue="234"
                allowClear
                className={styles.mockFocus}
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>active</Text>
              </div>
              <Input 
                suffix={<SearchOutlined />}
                defaultValue="234"
                allowClear
                className={styles.mockFocus}
              />
            </div>
          </Col>
        </Row>

        {/* 第四行: normal, hover, active (3个输入框，都有值) */}
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>normal</Text>
              </div>
              <Input 
                suffix={<SearchOutlined />}
                defaultValue="高级搜索"
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>hover</Text>
              </div>
              <Input 
                suffix={<SearchOutlined />}
                defaultValue="高级搜索"
                className={styles.mockHover}
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>active</Text>
              </div>
              <Input 
                suffix={<SearchOutlined />}
                defaultValue="高级搜索"
                className={styles.mockFocus}
              />
            </div>
          </Col>
        </Row>
      </div>

      {/* 带前后缀组件 */}
      <div>
        <Text strong style={{ fontSize: 14, display: 'block', marginBottom: 16 }}>● 带前后缀组件</Text>
        
        {/* Normal 状态行 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>normal</Text>
              </div>
              <Input 
                addonBefore="Http://" 
                addonAfter=".com" 
                placeholder="www.mysite" 
              />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input 
                addonBefore="Http://" 
                addonAfter=".com" 
                placeholder="www.mysite" 
              />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>www.mysite</Text>
              </div>
              <Input 
                addonBefore="Http://" 
                addonAfter=".com" 
                defaultValue="www.mysite" 
              />
            </div>
          </Col>
        </Row>

        {/* Hover 状态行 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>hover</Text>
              </div>
              <Input 
                addonBefore="Http://" 
                addonAfter=".com" 
                placeholder="www.mysite" 
                className={styles.mockHover}
              />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input 
                addonBefore="Http://" 
                addonAfter={
                  <Button type="text" size="small" style={{ margin: -7 }}>
                    <span style={{ fontSize: 20 }}>🔍</span>
                  </Button>
                } 
                placeholder="www.mysite" 
                className={styles.mockHover}
              />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input 
                addonBefore="Http://" 
                addonAfter=".com" 
                defaultValue="www.mysite" 
                className={styles.mockHover}
              />
            </div>
          </Col>
        </Row>

        {/* Focus 状态行 */}
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>focus</Text>
              </div>
              <Input 
                addonBefore="Http://" 
                addonAfter=".com" 
                placeholder="www.mysite" 
                className={styles.mockFocus}
              />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input 
                addonBefore="Http://" 
                addonAfter={
                  <Button type="text" size="small" style={{ margin: -7 }}>
                    <span style={{ fontSize: 20 }}>🔍</span>
                  </Button>
                } 
                placeholder="www.mysite" 
                className={styles.mockFocus}
              />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>www.mysite</Text>
              </div>
              <Input 
                addonBefore="Http://" 
                addonAfter=".com" 
                defaultValue="www.mysite" 
                className={styles.mockFocus}
              />
            </div>
          </Col>
        </Row>
      </div>

      {/* 基本文本组件 */}
      <div>
        <Text strong style={{ fontSize: 14, display: 'block', marginBottom: 16 }}>● 基本文本组件</Text>
        
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>请输入</Text>
              </div>
              <TextArea 
                placeholder="请输入" 
                autoSize={{ minRows: 3, maxRows: 3 }}
              />
            </div>
          </Col>
          <Col span={12}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>请输入</Text>
              </div>
              <TextArea 
                placeholder="请输入" 
                autoSize={{ minRows: 3, maxRows: 3 }}
              />
            </div>
          </Col>
        </Row>

        <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
          <Col span={12}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>请输入</Text>
              </div>
              <TextArea 
                placeholder="请输入" 
                autoSize={{ minRows: 3, maxRows: 3 }}
                className={styles.mockFocus}
              />
            </div>
          </Col>
          <Col span={12}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>请输入</Text>
              </div>
              <TextArea 
                placeholder="请输入" 
                autoSize={{ minRows: 3, maxRows: 3 }}
                disabled
              />
            </div>
          </Col>
        </Row>
      </div>
    </Space>
  );
};

export default App;

